<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue'

// tabs里面的标签
const tabs = ['全部', '抖音探店', '快手探店', '小红书探店', '大众探店', '火山探店']
// 当前的索引
const currentIndex = ref(0)
function changeCurrentIndex(index) {
  currentIndex.value = index
  uni.$emit('update',{option:index})
}
uni.$on('search',function(data){
	currentIndex.value = 0
})
</script>

<template>
  <view class="tabs">
    <scroll-view class="scroll-view" scroll-x>
      <block v-for="(tab, index) in tabs" :key="tab">
        <view class="item active" @click="changeCurrentIndex(index)">
          {{ tab }}
          <view v-if="index === currentIndex" class="line"></view>
        </view>
      </block>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.tabs {
  height: 80rpx;
  width: 100vw;
  background-color: #fff;
  .scroll-view {
    width: 100%;
    height: 100%;
    white-space: nowrap;

    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
      display: none;
    }
    
    .item {
      position: relative;
      display: inline-block;
      font-size: 28rpx;
      color: #404040;
      padding: 0 32rpx;
      line-height: 80rpx;
      box-sizing: border-box;
    }
    
    .active {
      border-bottom: 2rpx #faca2a solid;
    }

    .line {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2rpx;
      background-color: #faca2a;
    }
  }
}
</style>